import React from 'react';
import { inject, observer } from 'mobx-react';

import './style/';
import E9Header from './E9Header';
import E9DeskTop from './E9DeskTop';
import E9DeskTopBgImg from './E9DeskTopBgImg';

@inject('portalThemeStore')
@observer
class E9ThemeLayout5 extends React.Component {
    constructor(props) {
        super(props);
        this.widthChange = this.widthChange.bind(this);
    }

    componentDidMount() {
        const { portalThemeStore } = this.props;
        portalThemeStore.onLoadMain({ mobxrouteurl: '/main/?theme=ecology9&layout=5' });
        window.addEventListener('resize', this.widthChange);
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.widthChange);
    }
    widthChange =() => {
        const desklogo = $('.e9header-top-logo').width();
        const deskrleft = $('.e9header-home').width() + $('.e9header-quick-search').width() + 10;
        const deskrright = $('.e9header-right-toolbar').width();
        const deskwid = desklogo + deskrleft + deskrright + 50;
        $('.e9layout-desktop-container').css({ 'min-width': `${deskwid}px` });
    }

    render() {
        const { location } = this.props;
        const { query = {} } = location;
        const { layout } = query;

        return (
            <div className="e9layout-desktop-container">
                <E9DeskTopBgImg ecId={`${this && this.props && this.props.ecId || ''}_E9DeskTopBgImg@4r01q0`} {...this.props} />
                <div className="e9layout-desktop-header">
                    <E9Header ecId={`${this && this.props && this.props.ecId || ''}_E9Header@xmrq25`} {...this.props} />
                </div>
                <div className="e9layout-desktop-content">
                    <div id="themeLayoutMask" className="e9layout-desktop-mask" />
                    <div className="e9layout-desktop-main">
                        <div id="themeLayoutRoute" className="e9layout-desktop-route" style={layout == '5' ? {} : { backgroundColor: '#fff' }}>
                            {layout == '5' ? <E9DeskTop ecId={`${this && this.props && this.props.ecId || ''}_E9DeskTop@oqdngt`} {...this.props} /> : this.props.children}
                        </div>
                        <div id="themeLayoutFrame" className="e9layout-desktop-frame">
                            <iframe id="mainFrame" name="mainFrame" src="about:blank" />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default E9ThemeLayout5;
